<template>
    <PageWrapper title="分类列表">
        <!-- 房东列表 -->
        <BasicTable @register="registerTable">
            <Spin :spinning="loading" tip="加载中..." />
            <template #toolbar>
                <a-button type="primary" @register="registerModal" @click="addModalClick"
                    >添加分类</a-button
                >
            </template>
            <!-- 审核状态 -->
            <template #name="{ text }">
                <Tag v-if="text == '搞笑'" color="green">{{ text }}</Tag>
                <Tag v-else-if="text == '生活'" color="geekblue">{{ text }}</Tag>
                <Tag v-else-if="text == '农人'" color="volcano">{{ text }}</Tag>
                <Tag v-else-if="text == '科技'" color="yellow">{{ text }}</Tag>
                <Tag v-else-if="text == '美食'" color="pink">{{ text }}</Tag>
                <Tag v-else-if="text == '游戏'" color="purple">{{ text }}</Tag>
                <Tag v-else-if="text == '宠物'" color="grey">{{ text }}</Tag>
                <Tag v-else color="red">{{ text }}</Tag>
            </template>
            <!-- 操作 -->
            <template #action="{ record }">
                <TableAction
                    :actions="[
                        {
                            label: '删除',
                            icon: 'noto:multiply',
                            popConfirm: {
                                title: '确定要删除吗?',
                                okText: '确定',
                                cancelText: '取消',
                                confirm: () => deleteTableEvent(record),
                            },
                        },
                    ]"
                />
            </template>
        </BasicTable>
        <Modal @register="registerModal" @updateData="updateTable"></Modal>
    </PageWrapper>
</template>

<script lang="ts">
    import { defineComponent, ref } from 'vue'
    import { Tag, message } from 'ant-design-vue'
    import { Icon } from '/@/components/Icon'
    import { PageWrapper } from '/@/components/Page'
    import { BasicTable, useTable, TableImg, TableAction } from '/@/components/Table'
    import { DataListParams, DeleteParams } from '/@/api/category/model'
    import { Columns, FormConfig } from './model'
    import { deleteApi, dateListApi } from '/@/api/category'
    import Modal from './components/edit.vue'
    import { useModal } from '/@/components/Modal'
    const columns = [...Columns]
    export default defineComponent({
        name: 'LandlordList',
        components: { PageWrapper, BasicTable, Tag, TableImg, TableAction, Icon, Modal },
        setup() {
            const [registerTable, { reload }] = useTable({
                title: '分类列表',
                titleHelpMessage: '展示分类列表',
                canResize: true,
                useSearchForm: true,
                bordered: true,
                rowKey: '_id',
                showTableSetting: true,
                formConfig: FormConfig as any,
                actionColumn: {
                    title: '操作',
                    dataIndex: 'action',
                    fixed: 'left',
                    width: 240,
                    slots: { customRender: 'action' },
                },
                api: async (data) => {
                    const res = await dateListApi(data)
                    return {
                        items: res.list,
                        total: res.count,
                    }
                },
                beforeFetch: (pageData) => {
                    console.log('页面数据', pageData)
                    const data: DataListParams = {
                        name: pageData.name ? pageData.name : '',
                        page: pageData.page,
                        limit: pageData.pageSize,
                    }
                    return data
                },
                columns: columns,
            })
            const loading = ref(false)
            const [registerModal, { openModal }] = useModal()
            // 删除
            const deleteTableEvent = async (v: any) => {
                loading.value = true
                const data: DeleteParams = {
                    _id: v._id,
                }
                const res = await deleteApi(data)
                loading.value = false
                console.log(res)
                if (res) {
                    message.success('删除成功!')
                    reload()
                } else {
                    message.error('删除失败!')
                }
            }
            // 添加
            const addModalClick = () => {
                openModal()
            }

            // 更新表格
            const updateTable = () => {
                reload()
            }

            return {
                registerTable,
                deleteTableEvent,
                addModalClick,
                registerModal,
                updateTable,
                loading,
            }
        },
    })
</script>

<style lang="less">
    .vben-basic-table-img.check-img {
        height: 46px !important;
        align-content: center;
        justify-content: center;

        .ant-image {
            margin: auto;

            .ant-image-img {
                width: 40px;
                height: 40px;
                object-fit: cover;
            }
        }
    }

    .look {
        display: flex;
        align-items: center;
        text-align: center;
    }

    .unsend {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 46px;
    }
</style>
